<template>
	<view class="content">
		<view class="topNav">
			<view class="topNav" style="margin:0 -32rpx ;padding32rpx ;height: 90rpx;">
				<!-- <div class="cuIcon-back icon left" @click="back"></div> -->
				<div class="center">
					<span v-show='!isOpenSeach'>
						<span v-show='index==1'>微课</span>
						<span v-show='index==2'>动画演示</span>
						<span v-show='index==3'>视频教学</span>
						<span v-show='index==4'>随堂练习</span>
						<span v-show='index==5'>PPT课件</span>
					</span>
					<view class="cu-bar searchCont" v-show='isOpenSeach'>
						<view class="search-form round mySearch" style="margin: 0;padding: 0;">
							<input v-model="searchVal" type="text" placeholder=" 输入搜索内容/关键字"
								placeholder-style="text-align:center" placeholder-class='cuIcon-search'
								style="text-align: center;" />
						</view>
					</view>
				</div>
				<div class="right" style='font-size: 20px;display: flex;'>
					<div class='cuIcon-apps' style='margin-right: 32rpx;' @click='listTypeTo(2)'
						v-show='listType==1&&index!=4&&index!=5&&!isOpenSeach'></div>
					<div class='cuIcon-sort' style='margin-right: 32rpx;' @click='listTypeTo(1)'
						v-show='listType==2&&index!=4&&index!=5&&!isOpenSeach'></div>
					<div class='cuIcon-search' @click='openSeach()'></div>
				</div>
			</view>
		</view>
		<div class='contItem'>
			<div :class="index==1?'itemEd item':'item'" @click='indexTo(1)'>
				<!-- <div class='btnImg btnImg1'></div> -->
				<div>微课</div>
				<div class='selected' v-show='index==1'></div>
			</div>
			<div  :class="index==2?'itemEd item':'item'" @click='indexTo(2)'>
				<!-- <div class='btnImg btnImg2'></div> -->
				<div>动画演示</div>
				<div class='selected' v-show='index==2'></div>
			</div>
			<div  :class="index==3?'itemEd item':'item'" @click='indexTo(3)'>
				<!-- <div class='btnImg btnImg3'></div> -->
				<div>视频教学</div>
				<div class='selected' v-show='index==3'></div>
			</div>
			<div  :class="index==4?'itemEd item':'item'" @click='indexTo(4)'>
				<!-- <div class='btnImg btnImg4'></div> -->
				<div>随堂练习</div>
				<div class='selected' v-show='index==4'></div>
			</div>
			<div  :class="index==5?'itemEd item':'item'" @click='indexTo(5)'>
				<!-- <div class='btnImg btnImg4'></div> -->
				<div>PPT课件</div>
				<div class='selected' v-show='index==5'></div>
			</div>
		</div>
		<div class='subNav' v-show='listTypeData.length > 0'>
			<div class='subItem' :class="subItemIndex === index ? 'on' : ''" 
				v-for='(item,index) in listTypeData' 
				:key="'sub_'+index" 
				@click='onSubItemClick(item, index)'>
					{{item.name}}
			</div>
		</div>
		<div :style="listTypeData.length > 0 ? 'height:258rpx' : 'height:168rpx;'"></div>
		
		<div class='cont'>
		<!-- 	<div class='contTitle' v-show='index==1'>微课</div>
			<div class='contTitle' v-show='index==2'>动画演示</div>
			<div class='contTitle' v-show='index==3'>视频教学</div>
			<div class='contTitle' v-show='index==4'>随堂练习<span class='allContTitle' @click='toMore'>题库</span></div>
			<div class='contTitle' v-show='index==5'>PPT课件</div> -->
			<div class='VideoList1' v-show='listType==1&&index!=4&&index!=5'>
				<!-- 	<div class='videoItem'>
					<div class='left'>
						<div class='title'>典型衔架类结构分析</div>
						<div class='end'>2021-10-08 14：05：36</div>
						<div class='ongoing'><span class='cuIcon-time' style='display: inline-block;margin-right: 10rpx;'></span> 学习中</div>
						<div class='start'>未学习</div>
					</div>
					<div class='right end' @click='learned(item)'>已学</div>
					<div class='right ongoing' @click='learning(item)'>继续学习</div>
					<div class='right start' @click='learn(item)'>开始学习</div>
				</div> -->

				<div class='videoItem' v-for='(item,index) in listData' :key="index">
					<div class='left'>
						<div class='title'>{{item.name}}</div>
						<div class='ongoing' v-if="item.play_staus=='继续学习'"><span class='cuIcon-time'
								style='display: inline-block;margin-right: 10rpx;'></span>
							学习中</div>
						<div class='start' v-else-if="item.play_staus=='开始学习'">未学习</div>
						<div class='end' v-else>{{item.viewing_time}}</div>
					</div>
					<div class='right ongoing' @click='learning(item)' v-if="item.play_staus=='继续学习'">继续学习</div>
					<div class='right start' @click='learn(item)' v-else-if="item.play_staus=='开始学习'">开始学习</div>
					<div class='right end' @click='learned(item)' v-else>已学</div>
				</div>
			</div>
			<div class='VideoList2' v-show='listType==2&&index!=4&&index!=5'>
				<!-- <div class='videoItem'>
					<img src="https://inews.gtimg.com/newsapp_ls/0/14172204970/0" alt="" class='videoImg'>
					<div class='title'>典型衔架类结构分析</div>
					<div class='num'>2020 次播放</div>
				</div>
				<div class='videoItem'>
					<img src="https://inews.gtimg.com/newsapp_ls/0/14172204970/0" alt="" class='videoImg'>
					<div class='title'>典型衔架类结构分析</div>
					<div class='num'>2020 次播放</div>
				</div>
				<div class='videoItem'>
					<img src="https://inews.gtimg.com/newsapp_ls/0/14172204970/0" alt="" class='videoImg'>
					<div class='title'>典型衔架类结构分析</div>
					<div class='num'>2020 次播放</div>
				</div>
				<div class='videoItem'>
					<img src="https://inews.gtimg.com/newsapp_ls/0/14172204970/0" alt="" class='videoImg'>
					<div class='title'>典型衔架类结构分析</div>
					<div class='num'>2020 次播放</div>
				</div> -->
				<div class='videoItem' v-for='(item,index) in listData' :key="'index'+index" @click='toNext(item)'>
					<img :src="item.cover_picture" alt="" class='videoImg' />
					<!-- <video :src="item.url" class='videoImg'></video> -->
					<div class='title'>{{item.name}}</div>
					<div class='num'>{{item.read_num+item.read_num_supplement}} 次播放</div>
				</div>
				<i></i>
				<i></i>
				<i></i>
				<i></i>
				<i></i>
			</div>
			<div class='dataList3' v-show='index==4'>
				<!-- 	<div class='practiceItem'>
					<div class='left'>
						<div class='title'>典型衔架类结构分析</div>
						<div> <span style='display: inline-block;margin-right: 10rpx;font-size:28rpx;color: #E63C3C;'>70分</span> <span
							 style='color: #646972;font-size: 24rpx;display: inline-block;margin-right: 10rpx;'>共25题</span> <span style='color: #646972;font-size: 24rpx;display: inline-block;'>正确20题</span></div>
						<div style='color: #959BA5;font-size: 24rpx;'><span class='cuIcon-time' style='display: inline-block;margin-right: 10rpx;'></span>2021-10-08
							14:05:36</div>
					</div>
					<div class='right'>
						<div class='again'>重新答题</div>
						<div class='results'>查看试卷</div>
					</div>
				</div>
				<div class='practiceItem'>
					<div class='left'>
						<div class='title'>典型衔架类结构分析</div>
						<div style='color: #646972;font-size: 24rpx;'>共25题</div>
					</div>
					<div class='right'>
						<div class='answer'>开始答题</div>
					</div>
				</div> -->

				<div class='practiceItem' v-for='(item,index) in listData' :key="'index'+index">
					<div class='left'>
						<div class='title'>{{item.name}}</div>
						<div v-show='item.is_answer'>
							<span
								style='display: inline-block;margin-right: 10rpx;font-size:28rpx;color: #E63C3C;'>{{item.passing_rate}}分</span>
							<span
								style='color: #646972;font-size: 24rpx;display: inline-block;margin-right: 10rpx;'>共{{item.nums}}题</span>
							<span
								style='color: #646972;font-size: 24rpx;display: inline-block;'>正确{{item.success_num}}题</span>
						</div>
						<div v-show='item.is_answer' style='color: #959BA5;font-size: 24rpx;'><span class='cuIcon-time'
								style='display: inline-block;margin-right: 10rpx;'></span>{{item.answer_time}}</div>

						<div style='color: #646972;font-size: 24rpx;' v-show='!item.is_answer'>共{{item.nums}}题</div>
					</div>
					<div class='right'>
						<div class='again' @click='againTo(item)' v-show='item.is_answer'>重新答题</div>
						<div class='results' @click='resultsTo(item)' v-show='item.is_answer'>查看试卷</div>
						<div class='answer' @click='answerTo(item)' v-show='!item.is_answer'>开始答题</div>
					</div>
				</div>
				<div style='height: 120rpx;width: 100%;'></div>
			</div>
			<div class='PPTList' v-show='index==5'>
				<div class='PPTItem' v-for='(item,index) in listData' :key="'PPTindex'+index" @click='PPTtoNext(item)'>
					<div class='left'>
						<div class='title'>{{item.name}}</div>
					</div>
					<div class='right'>
						<div class='again'>查看</div>
					</div>
				</div>
			</div>
			<div style='height:120rpx;'></div>
		</div>
		<!-- 		<div class='bottomBtn' v-show='index==4'>
			<div style='width: 40%;'>
				<div style='text-align: center;'>
					<div style='font-size: 26rpx;color: #959BA5;'>已答</div>
					<div style='font-size: 30rpx;color: #575C65;'>25</div>
				</div>
				<div style='text-align: center;'>
					<div style='font-size: 26rpx;color: #959BA5;'>未答</div>
					<div style='font-size: 30rpx;color: #575C65;'>35</div>
				</div>
			</div>
			<div style='width: 60%;border-left: 1px solid #E2E4E7;'>
				<div>
					<div class='icon'></div>
					<div style='font-size: 30rpx;color: #575C65;'><span style='color: #a37100;'>25</span> /60题</div>
				</div>
				<div style='width: 180rpx;background: linear-gradient(90deg, #d2d3d3 0%, #FF7E49 100%);border-radius: 36rpx;font-size:28rpx;font-weight: normal;color: #FFFFFF;text-align: center;line-height: 72rpx;'>
					提交试卷
				</div>
			</div>
		</div> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// id: '',
				index: 1,
				listType: 1,
				searchVal: '',
				page_index: 1,
				page_num: 18,
				count: 1,
				listData: [],
				listTypeData:[],
				subItemIndex: 0,
				isOpenSeach: false,
				Url: '/video/micro_class_type'
			}
		},
		onLoad(e) {
			//console.log('e==入参===', e)
			// this.id = e.id
		},
		onShow() {

		},
		watch: {
			searchVal(val) {
				this.listData = []
				this.getData('0')
				//console.log('val==', val)
			},
		},
		mounted() {
			this.page_index = 1
			this.page_num = 18
			this.listData = []
			this.count = 0
			// // document.title = '预约规则';
			this.getData('0')
			//console.log('执行了onShow')
		},
		onReachBottom() {
			//console.log(this.count / this.page_index)
			// if (this.count / this.page_index > this.page_num) {
			// 	this.page_index++;
			// 	this.getData('1');
			// 	//console.log('加载更多');
			// } else {
			// 	//console.log('没有更多了');
			// }
		},
		methods: {
			listtoNext(item){
				console.log('listtoNext===',item)
			},
			getMore() {
				//console.log(this.count/this.page_index)
				if (this.count / this.page_index > this.page_num) {
					this.page_index++;
					this.getData('1');
					//console.log('加载更多');
				} else {
					//console.log('没有更多了');
				}
			},
			openSeach() {
				this.isOpenSeach = !this.isOpenSeach
			},
			listTypeTo(num) {
				this.listType = num
			},
			onSubItemClick(subItem, index){
				this.subItemIndex = index
				this.listData = subItem.second || []
			},
			indexTo(num) {
				if (this.index != num) {
					this.subItemIndex = 0
					this.index = num
					this.page_index = 1
					this.page_num = 18
					this.listData = []
					this.count = 0
					this.searchVal = ''
					if (this.index == 1) {
						// 微课
						this.Url = '/video/micro_class_type'
					} else if (this.index == 2) {
						// 动画演示
						this.Url = '/video/animation_type'
					} else if (this.index == 3) {
						// 视频教学
						this.Url = '/video/teaching_type'
					} else if (this.index == 4) {
						// 随堂练习
						this.Url = '/practice/list'
					} else if (this.index == 5) {
						// 随堂练习
						this.Url = '/ppt/list'
					}
					this.getData('0')
				}
			},
			back() {
				// uni.navigateBack()
				uni.redirectTo({
					url: `/pages/index/index`
				});
			},
			learned(item) {
				//console.log('item=已学=', item)
				uni.navigateTo({
					url: `/pages/video/details?id=${item.id}`
				});
			},
			learning(item) {
				//console.log('item=继续学习=', item)
				uni.navigateTo({
					url: `/pages/video/details?id=${item.id}`
				});
			},
			learn(item) {
				//console.log('item=开始学习=', item)
				uni.navigateTo({
					url: `/pages/video/details?id=${item.id}`
				});
			},
			againTo(item) {
				//console.log('item=重新答题=', item)
				uni.navigateTo({
					url: `/pages/course/answer?classroom_practice_id=${item.id}&is_answer=2&type=1&from=6`
					// url: `/pages/course/answer?classroom_practice_id=${item.id}`
				});
			},
			resultsTo(item) {
				//console.log('item=查看试卷=', item)
				uni.navigateTo({
					url: `/pages/course/answer?classroom_practice_id=${item.id}&is_answer=2&type=2&exam_no=${item.exam_no}&from=6`
				});
			},
			answerTo(item) {
				//console.log('item=开始答题=', item)
				uni.navigateTo({
					url: `/pages/course/answer?classroom_practice_id=${item.id}&is_answer=1&type=1&from=6`,
					// url: `/pages/course/answer?classroom_practice_id=${item.id}`
				});
			},
			toMore() {
				uni.navigateTo({
					url: `/pages/course/list`,
					// url: `/pages/course/answer?classroom_practice_id=${item.id}`
				});
			},
			PPTtoNext(item) {
				// let _this = this;
				// _this.uniRequest({
				// 	url: '/ppt/detail',
				// 	method: 'post',
				// 	data: {
				// 		id: item.id,
				// 	},
				// 	success: res => {
				// 		if (res.code == 200) {
				// 			console.log('返回值', res);
				// 			// res.data.path="http://recharge.lyuncai8888.com/static/img/test.ppt"
				// 			// this.viewerUrl='http://view.xdocin.com/xdoc?_xdoc='+res.data.path
				// 			localStorage.setItem("_imgUrl", `data:application/pdf;base64,${res.data.path}`)
				// 			uni.navigateTo({
				// 				url: '/pages/course/watchPPT'
				// 			});
				// 		}
				// 	},
				// });
				
				
				console.log('item=PPTtoNext=', item)
				uni.navigateTo({
					url: `/pages/course/watchPPT?id=${item.id}`,
				});
			},
			getData(type) {
				let _this = this;
				_this.uniRequest({
					url: _this.Url,
					method: 'post',
					data: {
						name: _this.searchVal,
						page_index: _this.page_index,
						page_num: _this.page_num
					},
					success: res => {
						//console.log('返回值', res);
						if (res.code == 200) {
							if (type == '0') {
								if (this.index == 4||this.index == 5) {
									this.listData = res.data.list;
									this.count = res.data.count || 0
								} else {
									this.listTypeData = res.data || []
									this.listData = (res.data[0] || {}).second || []
									// this.listData = res.data.videos
									// this.count = res.data.count || 0
								}
							} else {
								if (this.index == 4||this.index == 5) {
									this.listData = this.listData.concat(res.data.list);
									this.count = res.data.count || 0
								} else { // 没有分页加载逻辑
									this.listData = this.listData.concat(res.data.videos);
									this.count = res.data.count || 0
								}
							}


						}
					},
				});
			},
			toNext(item) {
				//console.log('toNext==', item)
				uni.navigateTo({
					url: `/pages/video/details?id=${item.id}`
				});
			}
		}
	}
</script>

<style lang='less' scoped>
	.content {
		min-height: 100vh;
		background-color: #ece8e5;
		.topNav {
			color: white;
			background: #fffaf0;
			color: #000000;
			.searchCont {
				/* margin-top: -68rpx;
				width: 90%; */
				/* float: right; */
				/* box-sizing: border-box; */
				width: 80%;
				margin: -36rpx auto 0;
			}
		}

		.subNav{
			position: fixed;
			top: 168rpx;
			background: #fffdfc;
			white-space: nowrap;
			overflow-x: auto;
			overflow-y: hidden;
			width: 100vw;
			.subItem{
				position: relative;
				display: inline-block;
				padding: 30rpx;
				font-size: 28rpx;
				line-height: 30rpx;
				&.on{
					background: #fffaf0;
					color: #a37101;
				}
				&.on:after{
					content: '';
					position: absolute;
					bottom: 10rpx;
					left: 30%;
					width: 40%;
					height: 2px;
					color: #a37101;
					background-color: #a37101;
				}
			}
		}
		
		.allContTitle {
			font-weight: 400;
			margin-left: 32rpx;
			font-size: 20rpx;
			color: #a37100;
		}

		.mySearch {
			background-color: #fffdfc;
			/* width: 10%; */
		}

		.contItem {
			padding: 110rpx 0 10rpx;
			background: #a37100;
			display: flex;
			justify-content: space-evenly;
			position: fixed;
			top: 0;
			width: 100%;
			z-index: 10;
			background: #fffaf0;
			.itemEd{
				color: #a37101 !important;
			}
			.item {
				font-size: 26rpx;
				font-weight: normal;
				color: #FFFFFF;
				line-height: 48rpx;
				text-align: center;
				color: #000000;
				.btnImg {
					height: 80rpx;
					width: 80rpx;
					margin: 0 auto;
				}

				.btnImg1 {
					background: url(~@/static/imgs/btn_weike.png) no-repeat center;
					background-size: 100% 100%;
				}

				.btnImg2 {
					background: url(~@/static/imgs/btn_donghua_yanshi.png) no-repeat center;
					background-size: 100% 100%;
				}

				.btnImg3 {
					background: url(~@/static/imgs/btn_shipin_jiaoxue.png) no-repeat center;
					background-size: 100% 100%;
				}

				.btnImg4 {
					background: url(~@/static/imgs/btn_suitang_lianxi.png) no-repeat center;
					background-size: 100% 100%;
				}

				.selected {
					width: 100%;
					height: 4rpx;
					background-color: white;
					border-radius: 12rpx;
					color: #a37101;
					background-color: #a37101;
				}
			}
		}

		.cont {
			padding: 32rpx;
			padding-top: 0;
			.contTitle {
				font-size: 34rpx;
				font-weight: bold;
				color: #000000;
				padding-left: 32rpx;
				position: relative;
			}

			.contTitle::before {
				content: '';
				position: absolute;
				left: 0;
				top: calc(50% - 16rpx);
				width: 10rpx;
				height: 32rpx;
				background: linear-gradient(0deg, #a37100 0%, #41B1F6 100%);
			}

			.VideoList1 {
				.videoItem {
					padding: 32rpx;
					background-color: #fffdfc;
					border-radius: 16rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					line-height: 48rpx;
					margin-top: 32rpx;
					box-sizing: border-box;
					background-color: #fffdfc;
					.left {
						max-width: calc(100% - 160rpx);

						.title {
							font-size: 30rpx;
							font-weight: bold;
							color: #575C65;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							box-sizing: border-box;
						}

						.end {
							font-size: 24rpx;
							font-weight: normal;
							color: #959BA5;
						}

						.ongoing {
							font-size: 24rpx;
							font-weight: normal;
							color: #a37100;
						}

						.start {
							font-size: 24rpx;
							font-weight: normal;
							color: #959BA5;
						}
					}

					.right.end {
						width: 140rpx;
						background: #EEEEF0;
						border-radius: 12rpx;
						font-size: 24rpx;
						font-weight: normal;
						color: #959BA5;
						line-height: 56rpx;
						text-align: center
					}

					.right.ongoing {
						background-color: #a37100;
						width: 140rpx;
						border-radius: 12rpx;
						font-size: 24rpx;
						font-weight: normal;
						color: #FFFFFF;
						line-height: 56rpx;
						text-align: center
					}

					.right.start {
						width: 140rpx;
						background: white;
						border: 1px solid #a37100;
						border-radius: 12rpx;
						font-size: 24rpx;
						font-weight: normal;
						color: #a37100;
						line-height: 56rpx;
						text-align: center
					}
				}
			}

			.VideoList2 {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.videoItem {
					width: 334rpx;
					background-color: #fffdfc;
					border-radius: 12rpx;
					margin-top: 32rpx;

					.videoImg {
						width: 334rpx;
						height: 220rpx;
						border-radius: 12rpx;
					}

					.title {
						font-size: 30rpx;
						font-weight: normal;
						color: #181E27;
						padding: 10rpx 30rpx 10rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.num {
						font-size: 24rpx;
						font-weight: normal;
						color: #959BA5;
						padding: 0 26rpx 30rpx;
					}
				}

				>i {
					width: 334rpx;
				}
			}

			.dataList3 {
				.practiceItem {
					padding: 32rpx;
					background-color: #fffdfc;
					border-radius: 16rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					line-height: 48rpx;
					margin-top: 32rpx;

					.left {
						max-width: calc(100% - 160rpx);

						.title {
							font-size: 30rpx;
							font-weight: bold;
							color: #575C65;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

					}

					.right {
						.again {
							width: 140rpx;
							background: white;
							border: 1px solid #a37100;
							border-radius: 12rpx;
							font-size: 24rpx;
							font-weight: normal;
							color: #a37100;
							line-height: 56rpx;
							text-align: center
						}

						.results {
							width: 140rpx;
							text-align: center;
							font-size: 24rpx;
							font-weight: normal;
							color: #a8aab0;
							line-height: 48rpx;
							position: relative;
						}

						.results::after {
							content: '';
							position: absolute;
							right: 0;
							top: calc(50% - 10rpx);
							background: url(~@/static/imgs/icon_arrow.png) no-repeat center;
							background-size: 100% 100%;
							width: 10rpx;
							height: 20rpx;
						}

						.answer {
							background-color: #a37100;
							width: 140rpx;
							border-radius: 12rpx;
							font-size: 24rpx;
							font-weight: normal;
							color: #FFFFFF;
							line-height: 56rpx;
							text-align: center;
							background-color: #a37100;
						}
					}
				}
			}

			.PPTList {
				.PPTItem {
					padding: 32rpx;
					background-color: #fffdfc;
					border-radius: 16rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					line-height: 48rpx;
					margin-top: 32rpx;
					.left {
						max-width: calc(100% - 160rpx);
					
						.title {
							font-size: 30rpx;
							font-weight: bold;
							color: #575C65;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					
					}
					
					.right {
						.again {
							width: 140rpx;
							background: #a37100;
							border: 1px solid #a37100;
							border-radius: 12rpx;
							font-size: 24rpx;
							font-weight: normal;
							color: white;
							line-height: 56rpx;
							text-align: center;
							background-color: #a37100;
						}
					}
				}
			}

		}

		.bottomBtn {
			width: 100%;
			height: 120rpx;
			background-color: #fffdfc;
			box-shadow: 0px 2px 12px 0px rgba(202, 202, 202, 0.5);
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			display: flex;
			justify-content: space-between;
			align-items: center;

			>div {
				display: flex;
				justify-content: space-around;
				flex-wrap: wrap;
				align-items: center;

				.icon {
					background: url(~@/static/imgs/icon_shijuan_tishu.png) no-repeat center;
					background-size: 100% 100%;
					width: 32rpx;
					height: 30rpx;
					margin: 0 auto;
				}
			}
		}
	}
</style>
